<template>
  <view class="main">
    <view class="list">
      <view
        class="user-box"
        v-for="(item, index) in getTrendsPageData"
        :key="index"
      >
        <view class="dispaly-just-between">
          <view class="user-left dispaly-line-center">
            <view class="user-avatar">
              <!-- @click.stop="
                $goUrl(`/pages/index/pages/businessCard?id=${item?.createUser}&moreId=${item?.id}`)
                " -->
              <image :src="item?.avatar" mode="aspectFill" />
            </view>
            <view class="user-info-box">
              <view class="user-info-top dispaly-center">
                <view class="name">{{ item?.nickName }}</view>
                <view class="job-name">({{ item?.company }})</view>
                <view class="vip" v-if="item?.isVip == 1">
                  <image src="/static/icon/vip.svg" mode="widthFix" />
                </view>
                <view
                  class="top dispaly-align-center"
                  v-if="item?.isOverhead == 1"
                  >置顶</view
                >
              </view>
              <view class="time">{{ item?.createTime }}</view>
            </view>
          </view>
          <view
            class="btn dispaly-align-center"
            @click.stop="
              $goUrl(
                `/pages/index/pages/businessCard?id=${item?.createUser}&trendsId=${item?.id}`
              )
            "
            >联系他</view
          >
        </view>
        <view class="con">
          <view class="content">
            <rich-text :nodes="item?.content"></rich-text>
          </view>
          <view class="c-cover">
            <image :src="item?.images.split(',')[0]" mode="aspectFill" />
          </view>
        </view>
        <view class="option dispaly-just-between">
          <view class="dispaly-center op-left">
            <view class="top dispaly-align-center" v-if="item?.isOverhead == 1"
              >置顶</view
            >
            <view class="l-per">{{ item?.callNum || 0 }}人已联系</view>
          </view>
          <view class="option-box dispaly-just-between">
            <view class="option-item dispaly-center">
              <view class="icon">
                <image src="/static/icon/msg.svg" mode="widthFix" />
              </view>
              <view class="icon-number">{{ item?.comment || 0 }}</view>
            </view>
            <view class="option-item dispaly-center">
              <view class="icon">
                <image src="/static/icon/star.svg" mode="widthFix" />
              </view>
              <view class="icon-number">{{ item?.likes || 0 }}</view>
            </view>
          </view>
        </view>
      </view>
      <LoadMore />
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  onPageScroll,
  onReachBottom,
  onPullDownRefresh,
} from "@dcloudio/uni-app";
import { getTrendsPage, getWriteFillList, MyTrendsPage } from "@/api/apiList";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { deleteObjectEmptyKey } from "@/utils/util";

const tabList = ref([]);
// 点击tab
const current = ref(0);
const tabChange = (data) => {
  query.pageNum = 1;
  getTrendsPageData.value = [];
  current.value = data.index;
  query.subtype = data.data.dictCode;
  getTrendsPageChange();

  console.log(data, "data");
};

const tabBg = ref("transparent");
onPageScroll((res) => {
  const { scrollTop } = res;
  tabBg.value = scrollTop >= 60 ? "#fff" : "transparent";
});

const query = reactive({
  pageSize: 1000000,
  pageNum: 1,
  source: 1,
  subtype: "",
  search: "",
  industryId: "",
  isUserId: uni.getStorageSync("userInfo")?.data?.userId ? 1 : 0,
});
const getTrendsPageData = ref([]);
const status = ref("noMore");
const getTrendsPageChange = async () => {
  const newQuery = deleteObjectEmptyKey(query);
  const response = await MyTrendsPage(newQuery);
  status.value = "loading";
  if (response && response?.code == 200) {
    if (response.rows.length) {
      getTrendsPageData.value = [...getTrendsPageData.value, ...response.rows];
      status.value = "noMore";
    } else {
      status.value = "noMore";
    }
  } else {
    status.value = "noMore";
  }
};

// 搜索
const search = () => {
  query.pageNum = 1;
  getTrendsPageData.value = [];
  getTrendsPageChange();
};

// 上一页带回的数据
const getPreviousPageType = () => {
  uni.$on("getType", (data) => {
    if (data) {
      query.pageNum = 1;
      getTrendsPageData.value = [];
      query.industryId = data.data.id;
      getTrendsPageChange();
      console.log(data, "formData.value");
    }
  });
};

const getWriteFillListData = async () => {
  const res = await getWriteFillList("/trends_sub_type");
  if (res.code == 200) {
    tabList.value = res.data;
    query.subtype = tabList.value[0].dictCode;
  }
};
onShow(async () => {
  query.pageNum = 1;
  getTrendsPageData.value = [];
  await getWriteFillListData();
  await getTrendsPageChange();
});
// onLoad(async () => {
//   getPreviousPageType()

// })

onReachBottom(() => {
  query.pageNum++;
  getTrendsPageChange();
});

onPullDownRefresh(() => {
  uni.showLoading({
    title: "加载中",
  });
  query.pageNum = 1;
  getTrendsPageData.value = [];
  getTrendsPageChange();
  uni.hideLoading();
  uni.stopPullDownRefresh();
});
</script>

<style lang="scss" scoped>
:deep(.van-search__content--round) {
  background-color: #fff;
}

:deep(.van-search) {
  padding-bottom: 0;
}

.tab {
  padding: 30rpx;
}

.act {
  bottom: 260rpx !important;
}

.carete-circle {
  position: fixed;
  right: 20rpx;
  bottom: 122rpx;

  .circle-w {
    width: 110rpx;
    height: 110rpx;
    box-sizing: border-box;
    border: 4rpx solid #111111;
    border-radius: 50%;

    .circle-n {
      background-color: #0753fd;
      width: 90rpx;
      height: 90rpx;
      border-radius: 50rpx;

      .circle-text {
        font-family: PingFang SC Regular;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }
}

.list {
  margin-top: 44rpx;
}

.user-box:last-child {
  margin-bottom: 0;
}

.user-box {
  margin-bottom: 20rpx;
  padding: 28rpx;
  background-color: #fff;
  border-radius: 16rpx;

  .con {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;

    .content {
      font-family: PingFang SC Regular;
      font-size: 26rpx;
      line-height: 26rpx;
      color: #111111;
      margin-right: 66rpx;
    }

    .c-cover {
      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
      }
    }
  }

  .user-left {
    .user-avatar {
      margin-right: 20rpx;
      position: relative;

      image {
        width: 104rpx;
        height: 104rpx;
        border-radius: 50%;
      }
    }

    .qz {
      position: absolute;
      bottom: -15rpx;
      text-align: center;
      font-family: PingFang SC Medium;
      font-size: 22rpx;
      color: #ffffff;
      background-color: #004fff;
      width: 60rpx;
      height: 30rpx;
      text-align: center;
      border-radius: 10rpx;
      left: 50%; //起始是在body中，横向距左50%的位置
      transform: translate(-50%, -50%); //水平、垂直都居中,也可以写成下面的方式
    }
  }

  .user-info-box {
    .user-info-top {
      margin-bottom: 20rpx;
      margin-top: 8rpx;

      .name {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        color: #111111;
      }

      .job-name {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        color: #999999;
      }

      .vip {
        margin-left: 15rpx;

        image {
          width: 70rpx;
          height: 28rpx;
        }
      }
    }

    .time {
      font-family: PingFang SC Regular;
      font-size: 22rpx;
      font-weight: normal;
      color: #777777;
    }
  }

  .top {
    font-family: PingFang SC Medium;
    font-size: 24rpx;
    font-weight: normal;
    color: #8c5b3f;
    padding: 5rpx 8rpx;
    background-color: #efd0a5;
    border-radius: 8rpx;
    margin-left: 15rpx;
  }
}

.btn {
  border-radius: 8rpx;
  box-sizing: border-box;
  border: 1rpx solid #0753fd;
  font-family: PingFang SC Regular;
  font-size: 22rpx;
  font-weight: normal;
  color: #004fff;
  padding: 5rpx 10rpx;
}

.option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26rpx;

  .l-per {
    margin-left: 14rpx;
    font-family: PingFang SC Regular;
    font-size: 24rpx;
    color: #999999;
  }

  .option-box {
    .option-item {
      margin: 0 20rpx;

      .icon {
        margin-right: 22rpx;

        image {
          width: 32rpx;
          height: 31rpx;
        }
      }

      .icon-number {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        font-weight: normal;
        color: #111111;
      }
    }
  }
}
</style>
